import React,{useState,useEffect,useRef} from 'react'
import { PageHeader,Steps,Button,Form,Input,Select,message,notification } from 'antd'
// 引入模块化样式
import style from './News.module.css'
import axios from 'axios'
import NewsEditor from '../../../components/NewsEditor'
// 从Select组件中将Option组件解构出来，这是antd规定的写法
const {Option} = Select

export default function NewsAdd(props) {

  // 存储步骤条组件的默认步骤
  const [current,setCurrent] = useState(0)

  // // 存储新闻分类
  const [categoryList,setCategoryList] = useState([])

  // // 存储第一个Form表单组件下的所有表单项的内容
  const [formInfo,setFormInfo] = useState([])

  // // 存储NewsEditor通过getContent方法传递过来的数据，这个数据是Editor组件的内容
  const [content,setContent] = useState("")

  // // 用于获取第一个Form组件的实例
  const NewsForm = useRef(null)

  useEffect(()=>{
    // 获取新闻分类的请求
    axios.get('/categories').then(res=>{
      console.log(res.data);
      setCategoryList(res.data)
    })
  },[])

  // 下一步按钮的点击事件回调
  const handleNext = ()=>{
    // 如果current值为0，说明当前步骤条组件处于第一步，显示的是第一个Form组件
    if(current===0){
      // 利用NewsForm获取到第一个Form组件的实例
      // validateFields()方法可以对这个Form组件下每个表单项的内容进行校验，它返回的是一个Promise，如果校验结果成功，就可以调用后面的then方法，失败则可以调用后面的catch方法
      NewsForm.current.validateFields().then(res=>{
        // console.log(res);    // res 获取到的是NewsForm对应的Form组件下每个表单项的内容
        setFormInfo(res)
        setCurrent(current+1)
      }).catch(err=>{
        console.log(err);
      })
    }else{
      // 如果NewsEditor组件中的Editor组件的内容为空
      if(content === "" || content.trim() === "<p></p>"){
        console.log(content);
        message.error("新闻内容不能为空！")
      }else{
        console.log(content);
        setCurrent(current+1)
      }
    }
  }

  // 从本地存储解构出来当前用户的数据
  const user = JSON.parse(localStorage.getItem("token"))

  // 上一步按钮的点击事件回调
  const handlePre = ()=>{
    setCurrent(current-1)
  }

  // 按钮区中的 保存至草稿箱功能的按钮组件Button 和 提交审核功能的按钮组件Button 的点击事件回调
  const handleSave = (auditState)=>{    // auditState 用于判断这个函数是由哪个功能按钮Button组件触发的
    // 调用接口，将新闻数据存进后端数据库，格式要匹配，得是一个对象
    axios.post('/news', {
      ...formInfo,
      "content": content,         // 新闻内容
      "region": user.region ? user.region : "全球",
      "author": user.username,
      "roleId": user.roleId,
      "auditState": 0,
      "publishState": 0,
      "createTime": Date.now(),
      "star": 0,
      "view": 0,
      // "publishTime": 0
    }).then(res => {
      // 如果auditState等于0的话，那么说明当前这个函数是由 保存至草稿箱功能的按钮组件Button 触发的，那么就跳转到草稿箱页面
      // 反之auditState等于1的话，那么说明当前这个函数是由 提交审核功能的按钮组件Button 触发的，那么就跳转到审核列表页面
      props.history.push(auditState === 0 ? "/news-manage/draft" : "/audit-manage/list")

      // 提示框组件
      notification.info({
        message: "通知",
        description:auditState === 0 ? "你可以到草稿箱中查看" : "你可以在审核列表里面查看",
        placement:"top"
      });
    })
  }

  return (
    <div>
      {/* 页头组件 */}
      <PageHeader
        className="site-page-header"
        title="撰写新闻"
        subTitle="Write a press release"
      />

      {/* 步骤条组件 */}
      <Steps
        // current 决定当前步骤条组件中进行到第几步，值为具体步骤在items数组中的下标
        current={current}
        // items 设置每一步的具体信息
        items={[
          {
            title: '基本信息',
            description: "新闻标题，新闻分类"
          },
          {
            title: '新闻内容',
            description: "新闻主体内容"
          },
          {
            title: '新闻提交',
            description: "保存草稿或者提交审核"
          },
        ]}
      />

      {/* 内容区 */}
      <div style={{marginTop:"50px"}}>
        <div className={current===0?"":style.active}>
        <Form name="control-hooks" ref={NewsForm}>
            <Form.Item
              label="新闻标题"
              name="title"
              rules={[
                {
                  required: true, message: 'Please input your username!'
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item name="categoryId" label="新闻类型" rules={[{ required: true }]}>
              <Select
                placeholder="Select a option and change input text above"
              >
                {
                  // 根据新闻分类生成对应的Option选项组件
                  categoryList.map((item) =>{
                     return <Option value={item.id} key={item.id}>{item.label}</Option>
                    }
                  )
                }
              </Select>
            </Form.Item>
          </Form>
        </div>

        <div className={current===1?"":style.active}>
          {/* 通过给NewsEditor组件传递一个方法，子组件通过调用这个方法给当前组件传递指定数据 */}
          <NewsEditor getContent={(value)=>{ setContent(value) }}></NewsEditor>
        </div>

        <div className={current===2?"":style.active}>
          <input type="text"/>
        </div>
      </div>

      {/* 按钮区 */}
      <div style={{marginTop:"50px"}}>
        {
          current===2 && <span>
            <Button type="primary" onClick={()=>{handleSave(0)}} style={{marginRight:"5px"}}>保存至草稿箱</Button>
            <Button danger onClick={()=>{handleSave(1)}} style={{marginRight:"5px"}}>提交审核</Button>
          </span>
        }
        {
          // 如果步骤条组件还未显示到第三步，那么就显示下面这个Button组件
          current<2 && <Button type="primary" onClick={handleNext} style={{marginRight:"5px"}}>下一步</Button>
        }
        {
          current>0 && <Button onClick={handlePre}>上一步</Button>
        }
      </div>

    </div>
  )
}
